import { Button } from '@shared/ui/Button'
import { Grid } from '@shared/ui/Grid'
import { Popover } from '@shared/ui/Popover'
import { Status, StatusColor } from '@shared/ui/Status'
import { Title } from '@shared/ui/Title'
import styles from './KanbanTaskCard.module.scss'

interface KanbanTaskCardProps {
  imageUrl?: string
  status: StatusColor
}

export const KanbanTaskCard = ({ imageUrl, status }: KanbanTaskCardProps) => {
  const menuCard = () => {
    return (
      <div className={styles['taglist']}>
        <Button color='primary' link size='small'>
          Удалить
        </Button>
        <Button color='primary' link size='small'>
          Выполнить
        </Button>
      </div>
    )
  }

  return (
    <Grid className={styles.component}>
      <div className={styles.info}>
        <Status className={styles.status} color={status} />
        <Popover
          classname={styles.popover}
          placementPanel='bottom-start'
          renderButton={() => <span className='material-symbols-rounded'>more_vert</span>}
          renderPanel={() => menuCard()}
        ></Popover>
      </div>
      <Title tag='h5'>Доделать Skeleton</Title>
      <img alt={imageUrl} className={styles.image} src={imageUrl} />
    </Grid>
  )
}
